<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>年月日季度日历多选demo</title>
    <link rel="stylesheet" type="text/css" href="//lib.baomitu.com/air-datepicker/2.2.3/css/datepicker.css"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
    <script type="text/javascript" src="//lib.baomitu.com/air-datepicker/2.2.3/js/datepicker.min.js"></script>
    <script type="text/javascript" src="//lib.baomitu.com/air-datepicker/2.2.3/js/i18n/datepicker.zh.min.js"></script>
    <style>
        body{padding: 20px;}
        .demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;text-overflow: ellipsis;}

        /* 季度样式修改 */
        .datepicker-cell-block{display: block; width: 100%; height: 40px; line-height:40px;text-align: center; margin: 2px 0;}
        .datepicker-cell-none{display: none;}
  </style>
</head>
<body>

    日期：<input type="text" id="daySelect" class="demo-input" placeholder="请选择日期" readonly="readonly"/>
    月份：<input type="text" id="monthSelect" class="demo-input" placeholder="请选择月份" readonly="readonly"/>
    年份：<input type="text" id="yearSelect" class="demo-input" placeholder="请选择年份" readonly="readonly"/>
    季度：<input type="text" id="quarterSelect" class="demo-input" placeholder="请选择季度" readonly="readonly"/>

<script>
    /* 日期选择 */
    $('#daySelect').datepicker({
        clearButton:true,
        language:'zh',
        multipleDates:true,                     //是否多选，Boolean | Number
        multipleDatesSeparator:',',             // 多选间隔符号
        onHide:function(inst, animationCompleted){
            inst.$el.attr('title', inst.$el.val())
        }
    })

    /* 月份选择 */
    $('#monthSelect').datepicker({
        clearButton:true,
        language:'zh',
        view:'months',
        minView:'months',
        dateFormat:'yyyy-mm',
        multipleDates:12,
        multipleDatesSeparator:',',
        onHide:function(inst, animationCompleted){
            inst.$el.attr('title', inst.$el.val())
        }
    })
    /* 年份选择 */
    $('#yearSelect').datepicker({
        clearButton:true,
        language:'zh',
        view:'years',
        minView:'years',
        dateFormat:'yyyy',
        multipleDates:5,
        multipleDatesSeparator:',',
        onHide:function(inst, animationCompleted){
            inst.$el.attr('title', inst.$el.val())
        }
    })


    /* 季度计算 */
    var quarterFn = function(month){
        return month < 4 ? 1 :
            month < 7 ? 2 :
                month < 10 ? 3 : 4;
    }
    /* 季度选择 */
    $('#quarterSelect').datepicker({
        clearButton:true,
        language:'zh',
        view:'months',
        minView:'months',
        dateFormat:'yyyy-第m季度',
        multipleDates:5,
        multipleDatesSeparator:',',
        onHide:function(inst, animationCompleted){
            inst.$el.attr('title', inst.$el.val())
        },
        onRenderCell:function(date,cellType){
            if(cellType == 'month'){
                if((date.getMonth()+1)%3 == 0) {
                    return {
                        html: '第'+quarterFn(date.getMonth() + 1)+'季度',
                        classes: 'datepicker-cell-block',
                    }
                }else{
                    return {
                        html: '第n季度',
                        classes: 'datepicker-cell-none',
                    }
                }
            }
        },
        onSelect:function(formattedDate, date, inst){

            var _val = ''
            $.each(inst.selectedDates,function(k,v){
                k === inst.selectedDates.length - 1 ?
                _val += v.getFullYear() + '-' + '第' + quarterFn(v.getMonth() + 1) + '季度' :
                _val += v.getFullYear() + '-' + '第' + quarterFn(v.getMonth() + 1) + '季度,';
            })
            inst.$el.val(_val)
        }
    })
</script>
</body>
</html>